<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Sam
 * @Date: 2022-04-07 20:18:30
 * @LastEditors: Sam
 * @LastEditTime: 2022-09-21 17:18:22
-->
<template>
    <div class="app-container">
        <el-card>
            <div slot="header" class="clearfix">
                <span>代码构建</span>
            </div>
            <el-form ref="form"  label-position="left" label-width="120px" :model="form" >
                <el-form :inline="true" >
                    <el-form-item label="模块" label-width="70px">
                        <el-input  v-model="form.module" placeholder="模块名称 默认admin"></el-input>
                    </el-form-item>
                    <el-form-item label="从数据表生成">
                        <el-select placeholder="不从数据表生成" v-model="form.table">
                             <el-option v-for="item in tables" :label="item.Name" :value="item.Name" :key="item.Name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="check_table">查询</el-button>
                    </el-form-item>
                </el-form>
                 <el-form :inline="true" >
                    <el-form-item label="菜单名称">
                        <el-input  v-model="form.menu_name" placeholder="菜单名称"></el-input>
                    </el-form-item>
                    <el-form-item label="控制器" label-width="100px">
                        <el-input  v-model="form.controller"  placeholder="字母，驼峰式"></el-input>
                    </el-form-item>
                   
                </el-form>
                <el-form :inline="true" >
                     <el-form-item label="菜单图标">
                        <el-input  v-model="form.icon"  placeholder="参考官网"></el-input>
                         <el-link type="primary" :underline="false">
                             <a href="https://element.eleme.cn/#/zh-CN/component/icon" target="_blank"><i class="el-icon-view el-icon--right"></i>查看</a>
                         </el-link>
                    </el-form-item>
                </el-form>
            </el-form>
                <div>
                    <span>表单信息:</span>
                    <el-divider></el-divider>
                     <el-form :inline="true" >
                            <el-form-item>
                                <el-checkbox v-model="form.create_button" >添加按钮</el-checkbox>
                                <el-checkbox v-model="form.detail_button" >详情按钮</el-checkbox>
                                <el-checkbox v-model="form.edit_button" >编辑按钮</el-checkbox>
                                <el-checkbox v-model="form.delete_button" >删除按钮</el-checkbox>
                                <el-checkbox v-model="form.batch_button" >批量操作按钮</el-checkbox>
                                <el-checkbox v-model="form.export_button" >导出按钮</el-checkbox>
                                <el-checkbox v-model="form.import_button" >导入按钮</el-checkbox>
                            </el-form-item> 
                    </el-form>
                    
                    <el-table
                        border
                        :data="tableData"
                        style="width: 100%">
                        <el-table-column  label="操作"    header-align="center">
                        <template slot="header">
                            <el-button  type="primary" size="small" icon="el-icon-plus" @click="addItem()">增加一栏</el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button  type="primary" size="small" icon="el-icon-plus" @click="addItemnext(scope.$index)">增加</el-button>
                            <el-button  type="danger" size="small" icon="el-icon-delete" @click="remove(scope.$index)">删除</el-button>
                        </template>
                        </el-table-column>
                        <el-table-column label="字段"    header-align="center">
                            <el-table-column prop="title" label="标题">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.title" placeholder="标题"></el-input>
                            </template>
                            </el-table-column>
                            <el-table-column prop="name" label="名称"    header-align="center">
                             <template slot-scope="scope">
                                <el-input placeholder="对应字段,英文字符" v-model="scope.row.name"></el-input>
                            </template>
                            </el-table-column>
                            <el-table-column prop="type" label="类型"    header-align="center">
                                <template slot-scope="scope">
                                   <el-select  placeholder="请选择" v-model="scope.row.type">
                                    <el-option
                                    v-for="item in select_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                    </el-select>
                                 </template>
                            </el-table-column>
                            <el-table-column prop="show" label="是否列表页显示"  align="center"  header-align="center">
                            <template slot-scope="scope">
                                <el-switch
                                    v-model="scope.row.show"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949">
                                </el-switch>
                            </template>
                        </el-table-column>
                        </el-table-column>
                        <el-table-column label="搜索">
                              <el-table-column label="表单搜索"    header-align="center" align="center">
                                  <template slot-scope="scope">
                                    <el-switch
                                    v-model="scope.row.search"
                                    active-color="#13ce66"
                                    active-text="开"
                                     inactive-text="关"
                                    inactive-color="#ff4949">
                                    </el-switch>
                                  </template>
                              </el-table-column>
                              <el-table-column label="搜索类型"    header-align="center">
                                  <template slot-scope="scope">
                                   <el-select  placeholder="请选择" v-model="scope.row.search_type">
                                    <el-option
                                    v-for="item in search_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                    </el-select>
                                 </template>
                              </el-table-column>
                        </el-table-column>
                         <el-table-column label="验证">
                              <el-table-column label="是否必填"    header-align="center">
                                   <template slot-scope="scope">
                                    <el-switch
                                    v-model="scope.row.validate"
                                    active-color="#13ce66"
                                    active-text="开"
                                     inactive-text="关"
                                    inactive-color="#ff4949">
                                    </el-switch>
                                  </template>
                              </el-table-column>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-if="form.table==''">
                     <div style="margin-top:15px">数据表信息:</div>
                     <el-divider></el-divider>
                       <el-form :inline="true" >
                            <el-form-item>
                                <el-checkbox v-model="form.create_table" >创建数据表</el-checkbox>
                                <el-checkbox v-model="form.create_table_force" >强制建表</el-checkbox>
                                <el-checkbox v-model="form.auto_timestamp" >自动时间戳</el-checkbox>
                            </el-form-item>
                            <el-form-item label="表引擎：">
                                <el-select  placeholder="请选择" v-model="form.table_engine">
                                    <el-option
                                    v-for="item in table_engine_options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                    </el-select>
                            </el-form-item>
                            <el-form-item label="表名：">
                                 <el-input v-model="form.table_name" placeholder="默认为控制器名.勿带表前缀"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="sync_form">同步表单数据</el-button>
                            </el-form-item>
                        </el-form>
                        <el-table
                        border
                        :data="dataBaseData"
                        style="width: 100%">
                        <el-table-column  label="操作"    header-align="center">
                        <template slot="header">
                            <el-button  type="primary" size="small" icon="el-icon-plus" @click="add_item_database">增加一栏</el-button>
                        </template>
                        <template slot-scope="scope_database" >
                            <el-button  type="primary" size="small" icon="el-icon-plus" @click="add_item_database_next(scope_database.$index)">增加</el-button>
                            <el-button  type="danger" size="small" icon="el-icon-delete" @click="remove_data_base_item(scope_database.$index)">删除</el-button>
                        </template>
                        </el-table-column>
                        <el-table-column prop="name" label="名称">
                            <template slot-scope="scope_database">
                                <el-input v-model="scope_database.row.name" placeholder="字段名称"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="类型"    header-align="center">
                            <template slot-scope="scope_database">
                                <el-input v-model="scope_database.row.type" placeholder="例如varchar(255)"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="default" label="默认值"    header-align="center">
                            <template slot-scope="scope_database">
                                <el-input v-model="scope_database.row.default" placeholder="为NULL表示不设默认值"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="not_null" label="不是null"  align="center"  header-align="center">
                            <template slot-scope="scope_database">
                                <el-switch
                                    v-model="scope_database.row.not_null"
                                    active-color="#13ce66"
                                    active-text="开"
                                     inactive-text="关"
                                    inactive-color="#ff4949">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="key" label="生成索引" align="center"   header-align="center">
                            <template slot-scope="scope_database">
                                <el-switch
                                    v-model="scope_database.row.key"
                                    active-color="#13ce66"
                                    active-text="开"
                                     inactive-text="关"
                                    inactive-color="#ff4949">
                                    </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="comment" label="备注"    header-align="center">
                            <template slot-scope="scope_database">
                                <el-input v-model="scope_database.row.comment" placeholder="备注"></el-input>
                            </template>
                        </el-table-column>
                         <el-table-column prop="extra" label="扩展属性"    header-align="center">
                            <template slot-scope="scope_database">
                                <el-input v-model="scope_database.row.extra" placeholder="例如unsigned"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                  <div style="text-align:center;margin-top:15px">
                           <el-button type="primary" icon="el-icon-check" @click="submit">提交</el-button>
                    </div>
        </el-card>
    </div>
</template>
<script>
    import waves from '@/directive/waves' // waves directive
    import permission from '@/directive/permission/index.js' // 权限判断指令
    import checkPermission from '@/utils/permission' // 权限判断函数
    import { curd_index, curd_run } from '@/api/curd' //接口
    export default{
        name: 'CurdIndex',
        directives: { waves, permission },
        components: { curd_index,curd_run },
          data() {
            return {
                form: {
                    create_button:true,
                    detail_button:false,
                    delete_button:true,
                    edit_button : true,
                    batch_button:false,
                    export_button : false,
                    import_button:false,
                    module: 'admin',
                    table : '',
                    menu_name: '',
                    controller: '',
                    form:[],
                    field:[],
                    create_table :true,
                    create_table_force:true,
                    auto_timestamp:true,
                    table_engine:'InnoDB',
                    table_name:''
                },
                tableData: [ //表单数据记录
                    {
                       title:'',
                       name:'',
                       show :true,
                       type:'text', 
                       search:false,
                       search_type:'text',
                       validate:false
                    }
                ],
                dataBaseData: [ //数据库数据集合
                    {
                       name:'',
                       type:'varchar(255)',
                       default:'null', 
                       comment:'',
                       extra:'',
                       not_null:false,
                       key:false
                    }
                ],
                tables : [], //数据表
                select_options :[ //类型选择
                    {value:'text',label:'文本'},
                    {value:'textarea',label:'文本域'},
                    {value:'select',label:'下拉框'},
                    {value:'selects',label:'下拉多选'},
                    {value:'radio',label:'单选框'},
                    {value:'checkbox',label:'多选框'},
                    {value:'switch',label:'开关'},
                    {value:'date',label:'日期'},
                    {value:'time',label:'时间'},
                    {value:'datetime',label:'日期范围'},
                    {value:'number',label:'数字'},
                    {value:'password',label:'密码'},
                    {value:'imageone',label:'单图'},
                    {value:'images',label:'多图'},
                    {value:'video',label:'视频'},
                    {value:'editor',label:'富文本'}
                ],
                 search_options :[ //搜索类型选择
                    {value:'text',label:'文本'},
                    {value:'select',label:'下拉框'},
                    {value:'date',label:'日期'},
                    {value:'time',label:'时间'},
                    {value:'area',label:'区域'}
                ],
                table_engine_options :[ //表引擎选择
                    {value:'InnoDB',label:'InnoDB'},
                    {value:'MyISAM',label:'MyISAM'},
                    {value:'MRG_MYISAM',label:'MRG_MYISAM'},
                    {value:'MEMORY',label:'MEMORY'},
                    {value:'ARCHIVE',label:'ARCHIVE'}
                ],
            }
        },
        created() {
            this.Int(); //初始化
        },
        methods: {
            checkPermission,
            submit:function(){
                this.form.field = this.dataBaseData;
                this.form.form  = this.tableData;
                curd_run(this.form).then(res=>{
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                })
            },
            check_table: function () {
                //有数据表选择 拿到数据表字段写入表单 隐藏数据库表单
                let self = this;
                self.tableData = [];
                curd_index(this.form.table).then(res => {
                    let table_info = res.data.table_info;
                    for (let index = 0; index < table_info.length; index++) {
                        const element = table_info[index];
                        self.tableData.push({
                            title:'',
                            name:element,
                            type:'text', 
                            search:false,
                            show :true,
                            search_type:'text',
                            validate:false
                        });
                    }
                })
            },
            sync_form:function(){
                //同步表单数据
                 this.dataBaseData = [];
                for (let index = 0; index < this.tableData.length; index++) {
                    const element = this.tableData[index];
                    this.dataBaseData.push({
                        name:element.name,
                        type:'varchar(255)',
                        default:'null', 
                        comment:element.title,
                        extra:'',
                        not_null:1,
                        key:1
                    });
                }
            },
            addItem:function(){
                //表单增加一栏
                 this.tableData.push({
                        title:'',
                        name:'',
                        type:'text', 
                        search:false,
                        show:true,
                        search_type:'text',
                        validate:false
                    })
            },
            addItemnext:function(index){
                //当前行增加一栏
                 this.tableData.splice(index+1,0,{
                        title:'',
                        name:'',
                        type:'text', 
                        show :true,
                        search:false,
                        search_type:'text',
                        validate:false
                 });
            },
            add_item_database:function(){
                //数据库表单增加一栏
                 this.dataBaseData.push({
                        name:'',
                        type:'varchar(255)',
                        default:'null', 
                        comment:'',
                        extra:'',
                        not_null:1,
                        key:1
                    })
            },
            add_item_database_next:function(index){
                this.dataBaseData.splice(index+1,0,{
                        name:'',
                        type:'varchar(255)',
                        default:'null', 
                        comment:'',
                        extra:'',
                        not_null:1,
                        key:1
                    })
            },

            remove: function (index) {
                //表单删除当前一栏
                this.tableData.splice(index, 1)
            },
            remove_data_base_item: function (index) {
                //数据库删除当前一栏
                this.dataBaseData.splice(index, 1)
            },
            Int:function(){
                //初始化
                curd_index().then(res => {
                    this.tables = res.data.tables;
                })
            },
        }
    }
</script>

